<template>
    <div>
        <van-nav-bar
            title="消息"
            @click-left="onClickLeft"
            :border="false"
        >
            <template #left>
                〈
            </template>
        </van-nav-bar>
        <div class="msg-content">
            <div class="all-msg">
                <van-icon name="notes-o" size="1.2rem"/>
                <div class="bottom-msg">
                    <div>
                        <p>订单消息</p>
                        <span>第一时间查看我的订单、售后消息</span>
                    </div>
                    <span>〉</span>
                </div>
                
            </div>
            <div class="all-msg">
                <van-icon name="service-o" size="1.2rem"/>
                <div class="bottom-msg">
                    <div>
                        <p>客服新消息</p>
                        <span>第一时间查看我的订单、售后消息</span>
                    </div>
                    <span>〉</span>
                </div>
                
            </div>
            <div class="all-msg">
                <van-icon name="gold-coin-o" size="1.2rem"/>
                <div class="bottom-msg">
                    <div>
                        <p>活动消息</p>
                        <span>第一时间查看我的订单、售后消息</span>
                    </div>
                    <span>〉</span>
                </div>
                
            </div>
            <div class="all-msg">
                <van-icon name="friends-o" size="1.2rem"/>
                <div class="bottom-msg">
                    <div>
                        <p>社交消息</p>
                        <span>第一时间查看我的订单、售后消息</span>
                    </div>
                    <span>〉</span>
                </div>
                
            </div>
        </div>
    </div>
</template>

<script>
export default {
     methods: {
        onClickLeft() {
            history.go(-1)
        },
    },
}
</script>

<style lang="stylus" scoped>
.msg-content
    width 100%
    border-top 0.4rem solid gray
    .all-msg
        width 100%
        display flex
        align-items center
        padding 0.2rem
        .bottom-msg
            width 100%
            display flex
            justify-content space-between
            align-items center
            font-size 0.30rem
</style>>